<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

</head>
<body>
<div id="app">

    <!--如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性-->
    <router-link to="/login?id=2">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>

</body>
<script>

    var login={
        template: '<h1>登录组件 -- {{$route.query.id}}</h1>',
        created(){
            console.log(this.$route.query.id);
        }
    };
    var register={
        template: '<h1>注册组件</h1>'
    };
    var router = new VueRouter({
        routes: [
            {path: '/login', component: login},
            {path: '/register', component: register},
        ]
    });


var vm = new Vue({
    el: '#app',
    data: {
        msg: '大家好哈哈哈哈，你们好啊。'
    },
    methods:{ },
    router: router

})
</script>
</html>